//element Table

Vue.component('qfTableColumn',{
    props: ['prop','label'],
    template: `
        <span />
    `,
    mounted(){
        this.$parent.column.push(this)
    }
})


Vue.component('qfTableone',{
    data(){
        return{
            column:[

            ]
        }
    },
    mounted(){
       
    },
    props:{
        data:{
            type: Array,
            default:[],
        }
    },
    template:`
    <table border="1" cellpadding="10" cellspacing='0'>
        <thead>
            <tr>
                <th v-for='item in column'>{{item.label}}</th> 
            </tr>
        </thead>
        <tbody>
            <tr v-for='row in data'>
               
                <td v-for='col in column'>{{row[col.prop]}}</td>
            </tr>
        </tbody>
        <slot></slot>
    </table>
    `,
})





//table组件
Vue.component('qfTable',{
    props: {
        trcontent:{
            type:Array,
            required:true
        },
        tdcontent:{
            type:Array,
            required:true
        },
    },
    template:`
    <div>
    <table class="qf-table">
        <tr>
            <td v-for='item in trcontent'>{{item.title}}</td>
        </tr>
        <tr v-for='tritem in tdcontent'>
            <td v-for='tditem in trcontent'>{{tritem[tditem.key]}}</td>
          
        </tr>
    </table>
    </div>
    
    `
})



//分页组件
Vue.component('qfPagenum',{
    props: {
        total:{
            type: Number,
            required: true
        },
        pagenum:{
            type: Number,
            required: true
        }
    },
    data(){
        return {
            totalepage:0
        }
    },
    watch:{
        total:{
            handler(newdata){
                this.totalepage = Math.ceil(this.total/this.pagenum)
            },
            immediate:true
        }
    },
    template:`
        <div class="qf-pagenum">
            <span v-for="item in totalepage" @click="$emit('close',item)">{{item}}</span>
        </div>
    `
})



//对话框组件
Vue.component('qsDialog',{
    props: {
        title:{
            type:String,
            default:'默认标题'
        },
        content:String,
        state:{
            type:Boolean,
            required:true,
        }
    },
    template:`<div class="qs-dialog" v-if='state'>
                <div class="box">
                    <div class="header">{{title}}</div>
                    <div class="main">{{content}}</div>
                    <div class="footer">
                        <button @click="$emit('close')">取消</button>
                        <button>确认</button>
                    </div>
                </div>  
            </div>`
})


//loading2组件
Vue.component('qfLoading2',{
    props: {
        state:{
            type:Boolean,
            required:true
        }
    },
    template:`<div class="qf_loading2" v-if='state' @click="$emit('close')"><span>loading...</span></div>`
})


//loading组件
Vue.component('qfLoading',{
    props: {
        state:{
            type: Boolean,
            required:true,
        }
    },
    template: `<div class="qf-loading" v-if='state'>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>`
                })

//按钮组件
Vue.component('qfButton',{
    props: {
        content:{
            type:String,
            required:true
        },
        type:{
            type:String,
            required:true
        }
    },
    template:`<button :class="['qf-button','qf-button--'+type,'qf-button--normal']">
    <div class="qf-button__content">
    <span class="qf-text">{{content}}</span>
    </div>
    </button>`
})




//导航栏组件
Vue.component('qfnavbar',{
    props: {
        title: {
            type: 'string',
            required: true
        },
        leftArrow: Boolean
    },
    template:`
        <div class="qfnavbar">
        <span @click="$emit('click-left')" v-if='leftArrow'>&lt;返回</span>
        <span>{{title}}</span>
        <span @click="$emit('click-right')">搜索</span>
        </div>
    `
})

//表单组件
Vue.component('creattable',{
    props: {
        state: {
            type: Boolean,
            default: true,
        }
    },
    data(){
        return{
            formDate:{
                account:'',
                password:'',
            }
        }
    },
    template:`<fieldset>
                <legend>
                jqg
                </legend>
                用户名：<input type="text" v-model='formDate.account'>
                密码：<input type="password" v-model='formDate.password'>
                <button v-if="state" @click="$emit('submit',formDate)">提交</button>
            </fieldset>`
})
